<template>
    <div>
        <div class="top_box container_box">
            <p class="page-title font-weight-500">课程列表
                <el-tooltip class="item"
                            effect="dark"
                            content="刷新"
                            placement="right">
                    <el-button class="refresh-btn"
                               icon="el-icon-refresh"
                               type="primary"
                               circle
                               plain
                               @click="getTableData"
                               size="mini"></el-button>
                </el-tooltip>
            </p>
            <!-- <div class="right-box u-flex u-row-between">
                <div></div>
                <div>
                    <el-button type="primary"
                               @click="editCurriculumTypeStatus = true">编辑课程类型</el-button>
                    <el-button v-if="editCurriculumTypeStatus"
                               icon="el-icon-check"
                               @click="editCurriculumTypeStatus = false">完成</el-button>
                </div>
            </div> -->
            <!-- <el-tabs v-model="currentCurriculumTypeId"
                     :addable="editCurriculumTypeStatus"
                     @tab-add="addCurriculumType">
                <el-tab-pane v-for="(item, index) in curriculumCategoryList"
                             :key="item.id"
                             :label="item.name"
                             :name="item.id">
                    <span slot="label"> {{ item.name }}
                        <i v-if="editCurriculumTypeStatus"
                           class="el-icon-edit-outline"
                           @click.stop="editCurriculumType(item)"></i>
                        <i v-if="editCurriculumTypeStatus"
                           class="el-icon-close"
                           @click.stop="deleteCurriculumType(item)"></i>
                    </span>
                </el-tab-pane>
            </el-tabs> -->
        </div>
        <div class="padding_box">
            <div class="search_box container_box">
                <el-form :inline="true"
                         label-width="80px"
                         :model="queryData">
                    <el-form-item label="">
                        <el-cascader ref="myCascader"
                                     filterable
                                     :show-all-levels="false"
                                     separator=">"
                                     placeholder="请选择课程分类"
                                     v-model="productCategory"
                                     @change="handleChange"
                                     :options="productCategoryList"
                                     :props="{ expandTrigger: 'hover', checkStrictly: true, value:'id',label:'name',children:'children', }">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select v-model="queryData.online"
                                   clearable
                                   placeholder="请选择上架状态">
                            <el-option v-for="item in onlineList"
                                       :key="item.id"
                                       :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="">
                        <el-autocomplete clearable
                                         v-model="referrerBy"
                                         popper-class="my-autocomplete"
                                         :debounce="500"
                                         :trigger-on-focus="false"
                                         :fetch-suggestions="querySearchAsync"
                                         placeholder="请输入上级昵称或手机号"
                                         @select="handleSelectReferrerBy">
                            <template slot-scope="{ item }">
                                <div v-if="item.nickName"
                                     class="name">{{ item.nickName }} {{ '（' + item.telNo + '）' }}</div>
                                <div v-else
                                     class="name">无匹配数据</div>
                            </template>
                        </el-autocomplete>
                    </el-form-item> -->
                </el-form>
                <div class="right-box u-flex u-row-between">
                    <div>

                    </div>
                    <div>
                        <el-button type="primary"
                                   @click="getTableData">搜索</el-button>
                        <!-- <el-button icon="el-icon-refresh-left"
                                   @click="cleanQueryData">清空筛选</el-button> -->
                    </div>

                </div>
            </div>
            <div class="container_box">
                <div class="order_title u-flex u-row-between">
                    <span>课程列表</span>
                    <el-button type="primary"
                               @click="addItem">添加课程</el-button>
                </div>
                <el-divider></el-divider>
                <el-table class="my_table"
                          header-row-class-name="order_header"
                          v-loading="loading"
                          :data="tableData"
                          tooltip-effect="dark"
                          style="width: 100%">
                    <!-- @selection-change="handleSelectionChange" -->
                    <!-- <el-table-column type="selection"
                                     width="55">
                    </el-table-column> -->
                    <el-table-column label="课程"
                                     width="300">
                        <template slot-scope="scope">
                            <div class="good_more_info">
                                <div class="order_item_box u-flex u-col-top">
                                    <img class="order_img"
                                         :src="scope.row.pic">
                                    <div class="">
                                        <p class="order_title1 font-weight-500 u-line-2"
                                           style="margin-bottom:20px">{{ scope.row.name }}</p>
                                        <el-tag type="info">市场价:{{ scope.row.originalPrice / 100 }}</el-tag>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="salePrice"
                                     label="售价"
                                     align="center">
                    </el-table-column> -->
                    <!-- <el-table-column prop="note"
                                     label="备注"
                                     align="center">
                    </el-table-column> -->
                    <el-table-column prop="addTime"
                                     align="center"
                                     label="创建时间">
                    </el-table-column>

                    <el-table-column label="操作"
                                     fixed="right"
                                     width="180"
                                     align="center">
                        <template slot-scope="scope">
                            <el-button size="mini"
                                       type="success"
                                       @click="editItem(scope.row.id)">修改</el-button>
                            <el-button size="mini"
                                       type="warning"
                                       @click="deleteUser(scope.row.id, scope.$index)">删除</el-button>
                            <el-button size="mini"
                                       type="primary"
                                       @click="goDetails(scope.row)">详情</el-button>
                            <el-button size="mini"
                                       type="success"
                                       @click="productCopy(scope.row.id)">复制</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background
                                   layout="total, prev, pager, next,sizes, jumper"
                                   :current-page="queryData.pageIndex"
                                   :page-size="queryData.pageSize"
                                   :page-sizes="[5, 10, 20, 40]"
                                   :total="pageTotal"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <!-- 添加弹出框 -->
        <!-- <el-dialog :title="currentEditEle.id ? '修改课程类型':'添加课程类型'"
                   :visible.sync="showCurriculumTypeDialog"
                   width="50%">
            <el-form :model="currentEditEle"
                     label-width="120px">
                <el-form-item label="类型名称">
                    <el-input type="text"
                              maxlength="10"
                              show-word-limit
                              v-model="currentEditEle.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="showCurriculumTypeDialog = false">取 消</el-button>
                <el-button type="primary"
                           @click="addOrEditCurriculumCategory">确 定</el-button>
            </span>
        </el-dialog> -->
        <!-- v-preventClick 防抖 -->
    </div>
</template>

<script>
import axios from '@/utils/axios.js';
import businessCard from '@/components/business-card/business-card.vue'

export default {
    name: 'basetable',
    components: {
        businessCard
    },
    data() {
        return {
            pageTotal: 0,
            loading: false,
            tableData: [],
            queryData: {
                categoryId: '',
                pageNum: 1,
                pageSize: 10,
            },
            currentCurriculumTypeId: '1',
            // 课程分类
            curriculumCategoryList: [],
            onlineList: [
                { id: true, name: '上架' },
                { id: false, name: '下架' },
            ],
            showCurriculumTypeDialog: false,
            currentEditEle: {
                id: null,
                icon: "test",
                productUnit: '个',
            },
            // 课程分类回显idList
            productCategory: '',
            // 课程分类
            productCategoryList: [],
            // editCurriculumTypeStatus: false,
        };
    },
    watch: {
        // currentCurriculumTypeId(newV) {
        //     this.queryData.categoryId = newV
        //     this.getTableData()
        // }
    },
    filters: {

    },
    activated() {
        this.getTableData()
    },
    created() {
        // this.getCurriculumCategory()
        this.getProductCategory()
        this.getTableData()
    },
    methods: {
        getTableData() {
            var _this = this;
            this.loading = true
            axios({
                url: "/admin/product/listPage",
                method: "post",
                data: this.queryData,
            }).then(res => {
                if (res.code == 0) {
                    _this.tableData = res.data.list;
                    _this.pageTotal = res.data.total;
                }
                this.loading = false;
            }).catch(err => {
                this.loading = false;
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.queryData.pageSize = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryData.pageNum = val
            this.getTableData()
        },
        // 详情
        goDetails(row) {
            this.$router.push({ path: '/curriculumDetails', query: { id: row.id } });
        },
        addItem() {
            this.$router.push({ path: '/editCurriculum', query: { id: '', } });
        },
        editItem(id) {
            this.$router.push({ path: '/editCurriculum', query: { id: id, } });
        },
        // 删除用户
        deleteUser(id, index) {
            // 二次确认删除
            this.$confirm('课程删除后将不可恢复请谨慎操作，确定删除？ (课程删除后不影响已发生的订单和交易数据)',
                '删除课程',
                {
                    type: 'warning'
                })
                .then(() => {
                    let data = { "id": id }
                    axios({
                        url: "/admin/product/delete",
                        method: "post",
                        data
                    }).then(result => {
                        if (result.code == 0) {
                            this.tableData.splice(index, 1);
                            this.$message.success(result.errMsg || '删除成功')
                            this.getTableData();
                        } else {
                            this.$message.error(result.errMsg || '删除失败')
                        }
                    })
                })
                .catch(() => { });
        },
        productCopy(id) {
            let data = {
                id: id,
            }
            axios({
                url: "/admin/product/productCopy",
                method: "post",
                data
            }).then(result => {
                if (result.code == 0) {
                    this.$message.success(result.errMsg || '复制成功')
                    this.getTableData();
                } else {
                    this.$message.error(result.errMsg || '复制失败')
                }
            })
        },
        // // 添加分类
        // addCurriculumType() {
        //     this.currentEditEle = {
        //         id: null,
        //         icon: "test",
        //         showStatus: true,
        //         keywords: 'curriculumCategory',
        //         productUnit: '个',
        //     }
        //     this.showCurriculumTypeDialog = true
        // },
        // // 编辑分类
        // editCurriculumType(item) {
        //     this.showCurriculumTypeDialog = true
        //     console.log('>>>>>>>>>>>>>>>>>>>>>', item)
        //     this.currentEditEle = Object.assign({}, item)
        // },
        // deleteCurriculumType() {
        //     // 二次确认删除
        //     this.$confirm('课程类型删除后将不可恢复请谨慎操作，确定删除？ (课程删除后不影响已发生的订单和交易数据)',
        //         '删除课程',
        //         {
        //             type: 'warning'
        //         })
        //         .then(() => {
        //             let data = { "id": id }
        //             axios({
        //                 url: "/admin/product/delete",
        //                 method: "post",
        //                 data
        //             }).then(result => {
        //                 if (result.code == 0) {
        //                     this.tableData.splice(index, 1);
        //                     this.$message.success(result.errMsg || '删除成功')
        //                     this.getTableData();
        //                 } else {
        //                     this.$message.error(result.errMsg || '删除失败')
        //                 }
        //             })
        //         })
        //         .catch(() => { });
        // },
        // // 获取分类列表
        // getCurriculumCategory() {
        //     axios({
        //         url: "/admin/productCategory/listPage",
        //         method: "POST",
        //         data: {
        //             pageSize: 0,
        //             pageNum: 100
        //         }
        //     }).then(result => {
        //         if (result.code == 0) {
        //             this.curriculumCategoryList = result.data.list
        //             this.currentCurriculumTypeId = this.curriculumCategoryList[0].id
        //         } else {

        //         }
        //     })
        // },
        // // 添加分类FUN
        // addOrEditCurriculumCategory() {
        //     let tipText = '添加'
        //     if (this.currentEditEle.id) {
        //         tipText = '修改'
        //     }
        //     axios({
        //         url: "/admin/productCategory/save",
        //         method: "POST",
        //         data: this.currentEditEle,
        //     }).then(result => {
        //         if (result.code == 0) {
        //             this.$message.success(result.errMsg || `${tipText}成功`)
        //             this.showCurriculumTypeDialog = false
        //             this.getCurriculumCategory()
        //         } else {
        //             this.$message.error(result.errMsg || `${tipText}失败`)
        //         }
        //     })

        // },
        // 获取所有课程分类
        getProductCategory() {
            axios({
                url: "admin/productCategory/tree",
                method: "post",
            }).then(result => {
                const { data } = result;
                data.forEach(ele => {
                    this.removeChildren(ele)
                });
                this.productCategoryList = data || [];

            })
        },
        removeChildren(node) {
            if (!node.children || !node.children.length) {
                delete node.children
            }
            if (node.children && node.children.length) {
                for (let i = 0; i < node.children.length; i++) {
                    this.removeChildren(node.children[i])
                }
            }
            return true
        },
        handleChange(value) {
            console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>', this.productCategory)
            this.queryData.categoryId = value[value.length - 1]
        },
    }
};
</script>

<style lang="scss" scoped >
.top_box {
    background-color: #fff;
    padding-bottom: 0;
    ::v-deep {
        .el-tabs__header {
            margin: 0 !important;
        }
        .el-tabs__item {
            color: #999;
            &.is-active {
                color: #1b93f8;
            }
        }
    }
}
.good_more_info {
    position: relative;
    .order_item_box {
        padding: 15px 0;
        .order_img {
            border-radius: 8px;
            width: 72px;
            height: 72px;
            margin-right: 8px;
        }
        .order_title1 {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }
        .order_guige {
            margin-top: 10px;
            font-size: 12px;
            color: #999;
        }
    }
}
</style>
<style lang="scss">
</style>
